<script src="http://static.scripting.com/github/bootstrap2/js/jquery.js"></script>
<script src="http://static.scripting.com/github/bootstrap2/js/bootstrap-transition.js"></script>
<script src="http://static.scripting.com/github/bootstrap2/js/bootstrap-modal.js"></script>

<div id="ConfigurationDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
	<div class="modal-header">
		<a href="#" class="close" data-dismiss="modal">&times;</a>
		<h2 style="margin: 0px">Configuration:</h2>
	</div>
	<div class="modal-body">
		<div class="divDialogElements" id="configContent">

		</div>
	</div>
	<div class="modal-footer">
		<button type="button" title="Read the currently active configuration values from the mote" onclick="getOrSetValues('get')">Get values</button>
		<button type="button" title="Set the web configuration values as active" onclick="getOrSetValues('set')">Set values</button>
		<button type="button" onclick="updateUIConfig()">Save</button>
		<button type="button" onclick="$('#ConfigurationDialog').modal('hide')">Cancel</button>
	</div>
</div>

<div id="InfoDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
	<div class="modal-header">
		<a href="#" class="close" data-dismiss="modal">&times;</a>
		<h2 style="margin: 0px">Information:</h2>
	</div>
	<div class="modal-body">
		<div class="divDialogElements" id="infoContent">

		</div>
	</div>
	<div class="modal-footer">
		<button type="button" onclick="$('#InfoDialog').modal('hide')">OK</button>
	</div>
</div>

<div id="ErrorDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
	<div class="modal-header">
		<a href="#" class="close" data-dismiss="modal">&times;</a>
		<h2 style="margin: 0px">Information:</h2>
	</div>
	<div class="modal-body">
		<div class="divDialogElements" id="errorContent">

		</div>
	</div>
	<div class="modal-footer">
		<button type="button" onclick="$('#ErrorDialog').modal('hide')">OK</button>
	</div>
</div>

<div id="talkDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
	<div class="modal-header">
		<a href="#" class="close" data-dismiss="modal">&times;</a>
		<h2 style="margin: 0px">Talk to Mote</h2>
	</div>
	<div class="modal-body" style="padding-bottom: 0px; margin-bottom: 0px">
		<div class="alert alert-success" id="talkDialog_successMsg" style="display: none;">...</div>
		<div class="alert alert-info" id="talkDialog_infoMsg" style="display: none;">...</div>
		<div class="alert alert-warning" id="talkDialog_warningMsg" style="display: none;">...</div>
		<div class="alert alert-danger" id="talkDialog_dangerMsg" style="display: none;">...</div>	
		<div class="divDialogElements">
			<pre id="listenResult" style="height: 250px; overflow-y: scroll;">
			
			</pre>
		</div>
	</div>
	<div class="modal-body" style="padding-top: 0px; margin-top: 0px">
		<label for="moteCommand">Enter data:</label><br/>
  		<textarea id="moteCommand" name="moteCommand" style="font-family: monospace; width: 80%" rows="2"  title="Enter data for sending to the mote" %DISABLED%></textarea><br/>
		<button type="button" onclick="sendData()">Send</button>
	</div>	
	<div class="modal-footer">
		<button type="button" onclick="$('#talkDialog').modal('hide')">OK</button>
	</div>
</div><br/>

%MOTE_TABLE%

<script language="javascript">
	var selectedMoteName;
    var text_output = "";
    var selectedMote;
    var processListeningOk = true; 
    var startListen = 0;

	function onConfig(selName) {
		selectedMoteName = selName;
	
		$('#configContent').html("");
		$("#ConfigurationDialog").modal("toggle")
			.css({'width': '80%', 'margin-left':'auto', 
			'margin-right':'auto', 'left':'10%'});
		selPlatform = 
			("sel_" + selName + "=" + $('#sel_' + selName).find(":selected").val());
		dataString = selName + "_cfg=true" + '&' + selPlatform
		$.ajax({
			type: "GET",
			url: "config",
			data: dataString,
			dataType: "text",
			success: function(data) {
				$('#configContent').html(data);
			},
			error: function() {
	    		alert('Error occured');
			}
		});
	}	

	function updatePlatform(motePlatform) {
		$('#infoContent').html("");
		$("#InfoDialog").modal("toggle");
		dataString = "platform_set=true" + '&' + motePlatform.id + "=" + motePlatform.value
		$.ajax({
			type: "GET",
			url: "config",
			data: dataString,
			dataType: "text",
			success: function(data) {
				$('#infoContent').html(data);
			},
			error: function() {
	    		alert('Error occured');
			}
		});
	}

	function viewFiles(moteName, motePlatform) {
		$('#infoContent').html("");
		$("#InfoDialog").modal("toggle");
		dataString = moteName + "_files=true" + "&" + motePlatform.id + "=" + motePlatform.value
		$.ajax({
			type: "GET",
			url: "config",
			data: dataString,
			dataType: "text",
			success: function(data) {
				$('#infoContent').html(data);
			},
			error: function() {
	    		alert('Error occured');
			}
		});
	}
	
	function getOrSetValues(action) {
		dataString = action + "=true&" + $("#configForm").serialize(); 
		$('#configContent').html("");
		$.ajax({
			type: "GET",
			url: "config",
			data: dataString,
			dataType: "text",
			success: function(data) {
				$('#configContent').html(data);
			},
			error: function() {
	    		alert('Error occured');
			}
		});
	}
	
	function updateUIConfig() {
		$('#ConfigurationDialog').modal('hide');
		dataString = "update_sensors=true&" + $("#configForm").serialize()
		$.ajax({
			type: "GET",
			url: "config",
			data: dataString,
			dataType: "text",
			success: function(data) {
				$('#infoContent').html(data);
			},
			error: function() {
	    		alert('Error occured');
			}
		});
	}
	    
    function talkToMote(mote) {
	    text_output = "";
	    $('#listenResult').text("");
	    $('#listenResult').show();
	    $('#dangerMsg').hide();
		$('#infoMsg').hide();
	    $("#talkDialog").modal('show');
    	selectedMote = mote;
    	processListeningOk = true;
    	startListen = 1;
    	processListen();
    }
    
	function processListen() {
		refreshListenPage(selectedMote);
		if (processListeningOk) {
			setTimeout(processListen, 1000);
		}
	}
	
	function refreshListenPage(mote) {
		$('#infoMsg').text("Waiting for data!");
		$('#infoMsg').show();
		$.ajax({
			type: "GET",
			url: "listen-single",
			data: "single=" + mote + "&max_data=100&startListen=" + startListen,
			dataType: "text",
			success: function(d) {
				if (d == "accessDenied") {
					$('#talkDialog_dangerMsg').text("Access denied!");
					$('#talkDialog_dangerMsg').show();
					$('#talkDialog_infoMsg').hide();
					$('#listenResult').hide();
					processListeningOk = false;
				} else if (d == "hostUnreachable") {
					$('#talkDialog_dangerMsg').text("The remote server is unreachable!");
					$('#talkDialog_dangerMsg').show();
					$('#talkDialog_infoMsg').hide();
					$('#listenResult').hide();
					processListeningOk = false;
				} else if (d == "noMotesSelected") {
					processListeningOk = false;
				} else {
					if (d.substring(0, 7) === "buffer:") {
						text_output = d.substring(7);
					} else {
						text_output += d;
					}
					arr = text_output.split("\n");
					outputSize = 21;
					if (arr.length > outputSize) {
						i = arr.length - outputSize;
						arr = arr.slice(i, i + outputSize);
						text_output = arr.join("\n");
					}
					$('#listenResult').text(text_output);
				}
			},
			error: function() {
        		alert('Error occured');
   			}
		});
		startListen = 0;
	}

	function sendData() {
		$.ajax({
			type: "GET",
			url: "talk-to",
			data: "single=" + selectedMote + "&data=" + escape$('#moteCommand').val()),
			dataType: "text",
			success: function(d) {
				if (d == "accessDenied") {
					$('#dangerMsg').text("Access denied!");
					$('#dangerMsg').show();
					$('#infoMsg').hide();
					$('#listenResult').hide();
				} else if (d == "hostUnreachable") {
					$('#dangerMsg').text("The remote server is unreachable!");
					$('#dangerMsg').show();
					$('#infoMsg').hide();
					$('#listenResult').hide();
				} else if (d == "noMotesSelected") {

				} else {
					alert("Data is successfully sent to the mote!");
				}
			},
			error: function() {
        		alert('Error occured');
   			}
		});
	}
</script>
